<template>
  <div>
    <el-card class="box-card">
      <div slot="header" style="text-align:left">
         编辑优惠卷
      </div>
       <div style="width:60%;">
        <el-form  :model='form' :rules="ruleform" label-width="100px" ref="form" style="text-align:left"> 
          <el-form-item label="劵名称" prop="name">
            <el-input  v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="赠券方式" prop="grantType" >
                 <el-select v-model="form.grantType" placeholder="请选择" :disabled="disabled">
                    <el-option  label="会员赠券"  value="Member"/>
                    <el-option  label="购物赠券"  value="Buy"/>
                    <el-option  label="注册赠券"  value="Register"/>
                  </el-select>
           </el-form-item>
           <el-form-item label="适用平台" prop="plat" >
                 <el-select v-model="form.plat" placeholder="请选择" :disabled="disabled">
                    <el-option  label="全部"  value="0"/>
                    <el-option  label="PC端"  value="1"/>
                    <el-option  label="移动端"  value="2"/>
                  </el-select>
           </el-form-item>
           <el-form-item label="使用门店" prop="merchantId" >
                 <el-select v-model="form.merchantId" placeholder="请选择" :disabled="disabled">
                    <el-option  label="全部"  value=""/>
                  </el-select>
           </el-form-item>
             <el-form-item label="总发行量" prop="amount" >
               <el-input-number v-model="form.amount" :precision="0" :step="1" :min="1" :max="1000" :disabled="disabled">
               </el-input-number>
             </el-form-item>
              <el-form-item label="每人限领" prop="limitNum">
               <el-input-number v-model="form.limitNum" :precision="0" :step="1" :min="1" :max="10" :disabled="disabled">
               </el-input-number>
             </el-form-item>
             <el-form-item label="面额(元)" prop="denomination" :disabled="disabled">
               <el-input-number v-model="form.denomination" :precision="2" :step="1" :min="1" :max="100" :disabled="disabled">
               </el-input-number>
             </el-form-item>
             <el-form-item label="使用门槛" prop="reachCash" >
                  <el-input width="30%" placeholder="正整数" v-model="form.reachCash" :disabled="disabled">
                     <template slot="prepend">满</template>
                     <template slot="append">元可用</template>
                  </el-input>
             </el-form-item>
          
          <el-form-item label="有效期" prop="expiretime" >
                <el-date-picker :disabled="disabled"
                v-model="form.expiretime"  format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd HH:mm:ss"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
          </el-form-item>
            <el-form-item label="规则描述" prop="description">
            <el-input  type='textarea' v-model="form.description"></el-input>
          </el-form-item>
      
          <el-form-item>
            <el-button type="primary" @click="onSubmit">更新</el-button>
            <el-button @click="backList">返回</el-button>
          </el-form-item>
        </el-form>
       </div>
    </el-card>
  </div>
</template>

<script>
import { couponModify ,couponLoad} from "@/libs/api.js";
export default {
  methods: {
    backList(){
      this.$router.push({
        path: "/coupon/list"
      });
    },
    onSubmit(){
          this.$refs['form'].validate((valid) => {
              if (!valid) {
                return;
              }
              this.form.startTime=this.form.expiretime[0];
              this.form.endTime=this.form.expiretime[1];
              couponModify(this.form).then((res) => {
                this.$util.success();
              })
         });
    }
  
  },

  mounted() {
    if(this.$route.query.id){
        couponLoad(this.$route.query.id).then((res) => {
           this.form=res;
           this.form.plat=this.form.plat+"";
           this.form.expiretime=[this.form.startTime,this.form.endTime]
        })
         this.disabled=true;
    }
  },

  data() {
    return {
        disabled:false,
        form:{
            grantType:"Member",
            plat:"0",
            limitNum:1,
            denomination:10,
            reachCash:100,
            amount:100,
            description:"平台赠券请在有效期内使用",
            merchantId:""
        },
        ruleform:{
            name: [
            { required: true, message: '请输入名称', trigger: 'blur' },
            { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
            ],
            description: [
              { required: true, message: '请输入使用规则', trigger: 'blur' },
              { min: 3, max: 30, message: '长度在 3 到 200 个字符', trigger: 'blur' }
            ],
            reduction: [
              { required: true, message: '请输入名称', trigger: 'blur' }
            ],
          
            expiretime: [
              {  required: true, message: '请选择起止日期', trigger: 'blur' }
            ],
            grantType: [
              {  required: true, message: '请选择赠券方式', trigger: 'change' }
            ],
            plat: [
              {  required: true, message: '请选择使用平台', trigger: 'change' }
            ],
            limitNum: [
              {  required: true, message: '请输入限领值(最小1最大10)', trigger: 'blur' }
            ],
            denomination: [
              {  required: true, message: '请输入面额值(最小1，最大100可精确两位小数)', trigger: 'blur' }
            ],
            reachCash: [
              {  required: true, message: '请输入使用门槛值', trigger: 'blur' },
              {
                pattern: /^[1-9]\d*$|^[0-9]+(.[0-9]{1,2})?$/,
                message: "请输入正确的价格",
                trigger: "blur"
              }
            ]
        }
    };
  }
};
</script>